<!-- 获取的geojson数据展示不出。
解决
localhost运行能展示geojson数据，通过电脑IP运行展示不出，公共资源访问403，
原因：在我们请求的时候会带我们的浏览器信息到阿里云，阿里云做了访问限制；
在Vue 3中，你可以通过在项目的public/index.html文件中直接添加<meta>标签来配置referrer-policy。
这样做可以确保在你的Vue应用中所有的HTTP请求都不会发送Referer头部。 -->
<template>
  <div>
    <div id="map"></div>
    <button @click="floorBut">我是一楼</button>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet/dist/leaflet";

// 编辑插件
import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";

onMounted(() => {
  initMap(); // 初始化地图
});

// 定义数据
let mapInfo = reactive({
  mapView: null, // 地图
  newLayer: null, // 新图层
});

let initMap = () => {
  mapInfo.mapView = L.map("map", {
    center: [27.6, 116.9], //中心坐标
    zoom: 11, // 初始缩放，因为在下文写了展示全地图，所以这里不设置，也可以设置
    minZoom: 3,
    maxZoom: 18,
    zoomControl: true, //缩放组件
    attributionControl: false, //去掉右下角logo
  });
  //声明图层组，存储标记marker
  mapInfo.newLeayer = new L.FeatureGroup(); // 创建一个要素组，可以选择性地给定一组初始图层和一个对象。
  mapInfo.mapView.addLayer(mapInfo.newLeayer);

  // 自定义地址icon
  L.Marker.prototype.options.icon = L.icon({
    iconUrl:
      "https://5b0988e595225.cdn.sohucs.com/images/20190113/7fe41a44233e4891b63dbfaa3c06041c.png", // icon
    iconSize: "30",
  });
  configImg() // 配置底图
};
let configImg = () => {
  // 配置底图，地图底层数据
  const baseLayer = {
    amap: L.tileLayer(
      "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
      { attribution: "高德" }
    ),
    ArcGIS: L.tileLayer(
      "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png",
      { attribution: "ArcGIS卫星影像" }
    ),
    whiteMap: L.tileLayer("http://10.87.211.254:8099/title/{z}/{x}/{y}.png", {
      attribution: "白色底图",
    }),
    tianditu: L.tileLayer(
      "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d",
      { attribution: "天地图" }
    ),
    tiandituStreet: L.tileLayer(
      "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d",
      { attribution: "天地图" }
    ),
  };
  // 配置底图布局
  baseLayer.amap.addTo(mapInfo.mapView);
  // 地图底层控制（控件组）
  L.control
    .layers(
      baseLayer,
      {},
      {
        position: "topright",
      }
    )
    .addTo(mapInfo.mapView);

  startLeafletPm() // 启动leaflet.pm 几何图形的编辑
  getMapInfo(); // 默认地图展示的数据
}
// 启动leaflet.pm 几何图形的编辑
let startLeafletPm = () => {
  // 添加绘制工具
  // 启用形状的绘图模式:线  (点:Marker, 圆点:CircleMarker, 圆:Circle, 线:Line, 矩形:Rectangle, 多边形: Polygon, 切割:Cut)
  mapInfo.mapView.pm.setLang('zh')
  mapInfo.mapView.pm.addControls({
    position: "topleft",
    drawPolygon: true, // 绘制多边形
    drawMarker: true, // 绘制标记点
    drawCircleMarker: false, // 绘制圆形标记
    drawPolyline: true, //绘制线条
    drawRectangle: true, //绘制矩形
    drawCircle: true, //绘制圆圈
    editMode: false, //编辑多边形
    dragMode: false, //拖动多边形
    cutPolygon: false, //添加⼀个按钮以删除多边形⾥⾯的部分内容
    removalMode: false, //清除多边形
  })
  // 全局绘制样式
  mapInfo.mapView.pm.setPathOptions({
    color: "orange",
    fillColor: "green",
    fillOpacity: 0.4,
  })
  // 或者单独设置绘制样式
  let options = {
    // 连接线标记之间的线 实线 
    templineStyle: {
      color: "red",
    },
    // 提⽰线从最后⼀个标记到⿏标光标的线虚线
    hintlineStyle: {
      color: "red",
      dashArray: [5, 5],
    },
    // 绘制完成的样式
    pathOptions: {
      color: "orange",
      fillColor: "green",
    },
  }
  // 激活绘制多边形功能、绘制多边形时的样式
  mapInfo.mapView.pm.enableDraw("Polygon", options)
  // 启用绘制--多边形功能
  mapInfo.mapView.pm.enableDraw("Polygon", {
    snappable: true, //启⽤捕捉到其他绘制图形的顶点
    snapDistance: 20, //顶点捕捉距离
  })
  // 关闭绘制--注意也可以关闭其他模式的绘制功能
  mapInfo.mapView.pm.disableDraw("Polygon")


  // 绘制事件监听
  mapInfo.mapView.on("pm:create", (e) => {
    console.log(e, "绘制完成时调⽤");
    console.log('mapInfo.newLeayer', mapInfo.newLeayer)
    if (e.shape == "Marker") {
      L.marker([e.marker.latlng.lat, e.marker.latlng.lng], { className: 'makers' }).addTo(mapInfo.newLeayer);
    }
  })
  mapInfo.mapView.on("pm:globalremovalmodetoggled", (e) => {
    console.log(e, "清除图层时调用");
  })
}

// 默认地图展示的数据
let getMapInfo = () => {
  // 点
  let markerArrs = [
    {
      lat: 27.6, //纬度
      lng: 116.9, //经度
      title: "1",
      name: "我是一号小区",
      url:
        "http://img0.baidu.com/it/u=927031405,1379586936&fm=253&app=138&f=JPEG?w=1067&h=800",
    },
    {
      lat: 27.6,
      lng: 116.98,
      title: "2",
      name: "我是er号小区",
      url:
        "https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1504/21/c57/5748101_1429615772108_mthumb.jpg",
    },
  ];
  markerArrs.forEach((item, index) => {
    let icon = L.icon({
      iconUrl:
        "https://img0.baidu.com/it/u=67006235,899758231&fm=253&fmt=auto&app=138&f=JPEG?w=401&h=401", //图片地址
      iconSize: "45", //图片大小
    });
    let markerIcon = L.marker([item.lat, item.lng], {
      icon: icon, //图标
      title: item.title, //图标名称
    });
    // 鼠标触摸--mousemove，鼠标点击---click
    markerIcon.on("click", (e) => {
      // 点亮图标
      // 设置点击图标高亮显示
      // 实现方式：遍历图标的图层，现将所有图标设置为旧图标，判断找到当前点击的图标，将点击的图标替换为新图标。
      mapInfo.newLeayer.eachLayer((layer) => {
        // console.log('layer', layer);
        let iconSrc = require("./5.png");
        let newIcon = L.icon({
          //图标地址
          iconUrl: iconSrc,
          //图标大小
          iconSize: "45",
        });
        layer.setIcon(icon); // 旧图标 setIcon更改标记图标。
        if (layer.options.title === e.target.options.title) {
          //通过title找到当前点击的图标
          layer.setIcon(newIcon); //替换为新图标
        }
      });

      // 展示弹窗
      if (item.title == e.target.options.title) {
        L.popup({
          closeButton: true, //是否有关闭按钮
          closeOnClick: false, // 点击空白是否关闭
          className: "mypopup",
        }) //弹框样式类名
          .setLatLng([e.latlng.lat, e.latlng.lng]) // 弹窗位置
          .setContent(
            `<div style="width:268px;font-size:16px">
          ${item.name}${item.title}</div>
          <img style="width:268px;height:145px" :id="btnCon${item.title}" src="${item.url}" />`
          )
          .openOn(mapInfo.mapView);
      }
    });
    console.log("btnCon", `btnCon${item.title}`);
    // mapInfo.mapView.on("popupopen", function (e) {
    //   document.getElementById(`btnCon${item.title}`).onclick = function () {
    //     alert("a");
    //   };
    // });
    markerIcon.addTo(mapInfo.newLeayer);
  });

  // 圆形
  let circle = L.circle([27.6595, 116.9], {
    color: "red", //轨迹颜色
    fillColor: "pink", //默认和轨迹色一样
    fillOpacity: 0.3, //圆的填充色
    radius: 3200, //半径，单位为米
  }).addTo(mapInfo.mapView);
  circle.bindPopup("I am a circle.");

  // 多边形
  let polygon = L.polygon(
    [
      [27.1595, 113.9],
      [23.2595, 114.9],
      [25.3595, 115.9],
    ],
    {
      opacity: 1,
      color: "green",
      fillColor: "blue",
    }
  ).addTo(mapInfo.mapView);

  // 矩形
  let rectangle = L.rectangle(
    [
      [27.6595, 114.9],
      [24.6595, 113.9],
    ],
    { color: "#ff7800", weight: 1 }
  ).addTo(mapInfo.mapView);

  // 折线
  let line = L.polyline(
    [
      [29.44, 106.473],
      [27.595, 106.9],
      [27.6595, 116.9],
    ],
    {
      opacity: 1,
      color: "red",
    }
  ).addTo(mapInfo.mapView);
};

// 点击触发地图中的popup
let floorBut = () => {
  L.popup({
    closeButton: true, //是否有关闭按钮
    closeOnClick: false, // 点击空白是否关闭
    className: "mypopup",
  }) //弹框样式类名
    .setLatLng([27.6, 116.9]) // 弹窗位置
    .setContent(
      `<div style="width:268px;font-size:16px">
          我是一号小区1</div>
          <img style="width:268px;height:145px"  src="http://img0.baidu.com/it/u=927031405,1379586936&fm=253&app=138&f=JPEG?w=1067&h=80" />`
    )
    .openOn(mapInfo.mapView);
};
</script>

<style lang="scss">
/* style语法糖--------------------:class="$style.txt"*/
#map {
  width: 100%;
  height: 700px;
  margin: auto;
  border: 10px solid pink;
}
.mypopup {
  background: red;
}
.map-circle {
  background: blue;
  opacity: 0.8;
  color: #fff;
  border-radius: 50%;
}
</style>
